
<link href="<{$res_url}>/css/wap/public.css" rel="stylesheet" type="text/css">
<link href="<{$res_url}>/css/wap/home.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<{$res_url}>/js/wap/jquery.min.js"></script>
<!-----"猜你喜欢"左右滑动----->
<script type="text/javascript" src="<{$res_url}>/js/wap/owl.carousel.js"></script> 
<script type="text/javascript">
	$(document).ready(function() {
		$("#owl-demo").owlCarousel({
			items:3,
			lazyLoad:true,
			navigation:true
		});
	});
</script>
<script type="text/javascript">   
	var isdrag=false;   
	var tx,x,ty,y;
	$(function(){  
		document.getElementById("moveid").addEventListener('touchend',function(){  
			sdrag = false;  
		});  
		document.getElementById("moveid").addEventListener('touchstart',selectmouse);  
		document.getElementById("moveid").addEventListener('touchmove',movemouse);  
	});  
	function movemouse(e){
	  var event = event || window.event;
      event.preventDefault();//阻止浏览器或body 其他冒泡事件 
	  if (isdrag){   
	   var n = tx + e.touches[0].pageX - x;  
	   $("#moveid").css("left",n); 
           var w = $("#img_tag").width(); 
           var h = $("#img_tag").height(); 
           val = Math.floor(n/w*100);
           if(val > 100)
               val = 100;
           else if( val < 0)
               val = 0;
           $("#tag_x").val(val);
	   var m = ty + e.touches[0].pageY - y;  
	   $("#moveid").css("top",m);
           val2 = Math.floor(m/h*100);
           if(val2 > 100)
               val2 = 100;
           else if( val2 < 0)
               val2 = 0;
           $("#tag_y").val(val2);
	   return false;	      
	   }   
	}
	function selectmouse(e){   
	   isdrag = true;  
           
	   tx = parseInt(document.getElementById("moveid").style.left+0);   
	   x = e.touches[0].pageX;
	   ty = parseInt(document.getElementById("moveid").style.top+0);   
	   y = e.touches[0].pageY;
           if($("#moveid").hasClass('t_right')){
               $("#type").val(1);
           }else{
               $("#type").val(2);
           }
           
	   return false;   
	}   
</script>   

</head>
<body style='background:#f8f9fa; position:relative; width:100%; height:100%; overflow:hidden;'>
    <section class="warp" style='padding-bottom:60px;'>
    	<div class="content">
<!--            <header>
            	<div class="search fl"><img src="<{$res_url}>/images/wap/icon1.png" width="20"></div>
                <div class="logo">标签</div>
            </header>-->
			
            <div class="tag">
            	<div class="tag_pic">
                    <img src="<{$image_id|storager}>" width="100%" id='img_tag'>
                    <div class="tag_box" id="moveid">
                    	<img src="<{$res_url}>/images/wap/icon28.png" class="dot">
                        <span>
                            <{$goods_name}>
                            <em class="s_right"></em>
                            <em class="Prompt"><i><img src="<{$res_url}>/images/wap/icon20.png" width="10"></i>点击标签可以改变方向哦</em>
                        </span>
                    </div>
                </div>
                
                <script type="text/javascript">
                	$(document).ready(function() {
                        $(".tag_box span").click(function(){
								if($(this).parent().hasClass("t_right")){
										$(this).parent().removeClass("t_right")
									}else{
										$(this).parent().addClass("t_right")
										}
							})
                    });
					function fadeOut(){
							$(".tag_box span em.Prompt").fadeOut()
						}
					window.setTimeout("fadeOut()",5000);
                </script>
                
                <div class="tag_tit">标签可以移动哦</div>
                <form method='post' action='amember-opinions_add.html'>
                    <div class="the_next" style="position:fixed;"><input type='hidden' name='x' id='tag_x'> <input type='hidden' name='y' id='tag_y'><input type='hidden' name='type' id='type'><a href="javascript:$('form').submit();">下一步</a></div>
                </form>
            </div>
            
        </div>
    </section>
</body>
</html>